<template>
<div class="fix width" >
  <div class="top">
    <div class="header flex">
      <!-- logo -->
      <a href="/"></a>
      <!-- 搜索框 -->

      <div class="search flex" @click="toSearch">
        <van-icon name="search" size="18px" color="#333" />
        <span>搜索商品, 共141972款好物</span>
      </div>
      <div style="font-size: 12px;" >{{ }}</div>
      <button  class="login" @click="toLogin">登录</button>
    </div>
    <!-- 导航滚动 -->
    <div class="tabWrap">
      <div class="list flex" v-if="state">
        <div class="tab" :class="categoryId ? '' : 'active'">
          <a href="/">推荐</a>
        </div>
        <div
          class="tab"
          :class="categoryId == category.id ? 'active' : ''"
          v-for="category in categories"
          :key="category.id">
          <router-link :to="`/list?categoryId=${category.id}`">{{
            category.name
          }}</router-link>
        </div>
      </div>
      <div class="tabAlter" v-else>全部频道</div>
      <!-- icon定位 -->
      <div class="toggle">
        <div class="liner"></div>
        <div class="icon">
          <Transition>
            <van-icon
              :name="state ? 'arrow-down' : 'arrow-up'"
              size="20px"
              color="#666"
              @click="state = !state" />
          </Transition>
        </div>
      </div>
    </div>
    <div class="moreCate flex" v-if="!state">
      <div class="cateTag" :class="categoryId ? '' : 'active'">
        <a href="/">推荐</a>
      </div>
      <div
        class="cateTag"
        :class="categoryId == category.id ? 'active' : ''"
        v-for="category in categories"
        :key="category.id">
        <router-link :to="`/list?categoryId=${category.id}`">{{
          category.name 
        }}</router-link>
      </div>
    </div>
  </div>
</div>
<div class="h73"></div>
<!-- 遮罩 -->
<div class="mask" v-if="!state"></div>
</template>

<script setup lang="ts">
import { reqCategory } from "@/api/home";
import type { categoryList } from "@/api/home/mudul";
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";



let $router = useRouter()



let state = ref(true);
let categories = ref<categoryList[]>([]);
let router = useRouter()
async function getCategory(num: string = '1005000') {

  let res = await reqCategory(num);
   
  
  categories.value = res.data.data.categoryList;
  // console.log(res.data.data.categoryList)

  try {
    let res = await reqCategory(num);

  // console.log(res.data.data.categoryList)
  // console.log(res)
  categories.value=res.data.data.categoryList
  } catch (error) {
    
  }
  // let res = await reqCategory(num);

  // console.log(res.data)
  // categories.value = res.data.data.data.categoryHotSellModule.categoryList;

 
}

watch(
  () => prop.categoryId,
  (count, prevCount) => {

    getCategory(prop.categoryId)
  },
  {
    deep: true
  }
)

onMounted(() => {
  getCategory(prop.categoryId);
});

// 跳转到搜索页面
let toSearch = () => {
  $router.push({ path: '/search' })
}
// 跳转到登录页
let toLogin = () => {
  $router.push({ path: '/login' })
}
// 接收传递的分类id
let prop = defineProps(["categoryId"]);


</script>

<style scoped lang="less">
.width{
  width: 375px;
}
.flex {
  display: flex;
}

.fix {
  position: fixed;
  width: 100%;
  z-index: 10;
}

.h73 {
  height: 73px;
}

.top {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #d9d9d9;

  .header {
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    box-sizing: border-box;

    a {
      width: 70px;
      height: 20px;
      background-image: url("./images/logo.png");
      background-size: cover;
    }

    .search {
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 28px;
      border: none;
      font-size: 14px;
      border-radius: 3px;
      background-color: #ededed;

      span {
        color: #666;
        margin-left: 5px;
      }
    }

    .login {
      font-size: 12px;
      color: red;
      border: 1px solid red;
      border-radius: 5px;
      background-color: white;
    }
  }

  .tabWrap {
    position: relative;
    width: 100%;
    height: 30px;
    overflow: hidden;

    .list {
      padding-left: 15px;
      width: 100%;
      height: 38px;
      overflow-x: scroll;
      white-space: nowrap;

      .tab {
        padding: 5px 8px;
        height: 18px;
        text-align: center;
        color: #333;
        font-size: 14px;
        margin-right: 24px;

        a {
          color: #333;
        }
      }

      .active {
        color: #dd1a21;
        border-bottom: 2px solid #dd1a21;
      }
    }

    .tabAlter {
      padding-left: 15px;
      color: #333;
      font-size: 14px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      box-sizing: border-box;
    }

    .toggle {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;

      .liner {
        width: 30px;
        height: 30px;
        background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff);
      }

      .icon {
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #666;
        background-color: white;
      }
    }
  }

  .moreCate {
    padding: 12px 15px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    background: #fff;

    .cateTag {
      width: 75px;
      height: 28px;
      font-size: 12px;
      text-align: center;
      line-height: 28px;
      margin-bottom: 20px;
      border-radius: 3px;
      background: #fafafa;
      border: 1px solid #ccc;

      a {
        color: #333;
      }
    }

    .active {
      border: 1px solid #dd1a21;
      color: #dd1a21;
    }
  }
}

.mask {
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

